<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action>
      <n-button type="primary" @click="handleAdd()">
        <i class="i-material-symbols:add mr-4 text-18" />
        添加新任务
      </n-button>
    </template>

    <MeCrud
      ref="$table"
      v-model:query-items="queryItems"
      :scroll-x="1200"
      :columns="columns"
      :get-data="api.read"
    >


      <MeQueryItem label="状态" :label-width="50">
        <n-select
          v-model:value="queryItems.status"
          clearable
          :options="[
            { label: '已完成', value: 2 },
            { label: '进行中', value: 1 },
            { label: '待开始', value: 0 },
          ]"
        />
      </MeQueryItem>
    </MeCrud>

    <MeModal ref="modalRef" width="520px">
      <n-form
        ref="modalFormRef"
        label-placement="left"
        label-align="left"
        :label-width="80"
        :model="modalForm"
      >
        <n-form-item
          label="抓取地址"
          path="url"
          :rule="{
            required: true,
            message: '请输入抓取地址',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.url" />
        </n-form-item>
      </n-form>
    </MeModal>
  </CommonPage>
</template>

<script setup>
import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
import { formatDateTime } from '@/utils'
import { MeCrud, MeQueryItem, MeModal } from '@/components'
import { useCrud } from '@/composables'
import api from './api'

const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})

onMounted(() => {
  $table.value?.handleSearch()
})

const columns = [
  { title: 'id', key: 'id', width: 50, ellipsis: { tooltip: true } },

  {
    title: '抓取地址',
    key: 'url',
    width: 150,
    ellipsis: { tooltip: true },
    render: (row) =>
      h('a', {
        href: row.url,
        target: '_blank'
      }, row.url)
  },
  { title: '已抓取次数', key: 'count', width: 80, ellipsis: { tooltip: true } },
  {
    title: '状态',
    key: 'status',
    width: 80,
    ellipsis: { tooltip: true },
    render: ({ status }) => {
      if (status === 0) {
        return h(
          NTag,
          { type: 'error' },
          { default: () => '未开始' }
        )
      } else if (status === 1) {
        return h(
          NTag,
          { type: 'info' },
          { default: () => '进行中' }
        )
      } else if (status === 2) {
        return h(
          NTag,
          { type: 'success' },
          { default: () => '已完成' }
        )
      }
    }
  },
  { title: '创建时间', key: 'createTime', width: 150, ellipsis: { tooltip: true } },
  { title: '最后更新时间', key: 'lastUpdateTime', width: 150, ellipsis: { tooltip: true } },

  {
    title: '操作',
    key: 'actions',
    width: 150,
    align: 'right',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () => handleOpen({ action: 'edit', title: '编辑', row, onOk: onSave })
          },
          {
            default: () => '编辑',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' })
          }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            style: 'margin-left: 12px;',
            onClick: () => handleDelete(row.id)
          },
          {
            default: () => '删除',
            icon: () => h('i', { class: 'i-radix-icons:reset text-14' })
          }
        )
      ]
    }
  }
]

async function handleEnable(row) {
  row.enableLoading = true
  try {
    await api.update({ id: row.id, enable: !row.enable })
    row.enableLoading = false
    $message.success('操作成功')
    $table.value?.handleSearch()
  } catch (error) {
    row.enableLoading = false
  }
}

const {
  modalRef,
  modalFormRef,
  modalForm,
  modalAction,
  handleAdd,
  handleDelete,
  handleOpen,
  handleSave
} = useCrud({
  name: '用户',
  initForm: { enable: true },
  doCreate: api.create,
  doDelete: api.delete,
  doUpdate: api.update,
  refresh: () => $table.value?.handleSearch()
})

function onSave() {
  if (modalAction.value === 'edit') {
    return handleSave({
      api: () => api.update(modalForm.value),
      cb: () => $message.success('更新成功')
    })
  } else if (modalAction.value === 'add') {
    return handleSave({
      api: () => api.create(modalForm.value),
      cb: () => $message.success('创建成功')
    })
  }
  handleSave()
}
</script>
